<template>
	<div style="height: 70vh; overflow: hidden" ref="scrollRef">
		<div class="options">
			<template v-for="group in list" :key="group.letter">
				<div class="options__title">{{ group.letter }}</div>
				<div
					class="options__item"
					v-for="item in group.data"
					:key="item.id"
					@click="onClick(item)"
					:class="{ active: modelValue == item.id }"
				>
					{{ item.name }}
				</div>
			</template>
		</div>
	</div>
</template>

<script setup>
import useScroll from 'composition/use-scroll'
import { onMounted, ref, defineProps, defineEmits } from 'vue'
onMounted(() => {
	console.log('onMounted')
})
const { list } = defineProps({
	list: {
		type: Array,
		required: true
	},
	modelValue: {
		type: [String, Number]
	}
})
const emit = defineEmits(['update:modelValue', 'confirm'])

const onClick = (item) => {
	emit('update:modelValue', item.id)
	emit('confirm', item.id)
}

const scrollRef = ref(null)
useScroll(scrollRef)
</script>

<style lang="scss" scoped="scoped">
.options {
	line-height: 3.3em;
	padding-left: $space_4;
	&__title {
		font-size: $font_large;
		color: $color_main;
		text-transform: uppercase;
	}
	&__item {
		font-size: $font_large;
		color: $color_text;

		&.active {
			color: $color_main;
		}
	}
}
</style>
